<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../common/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../common/js/bootstrap-3.3.7-dist/css/bootstrap-datatimepicker.4.14.47.min.css" />
		
		<link rel="stylesheet" type="text/css" href="../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/manager.css"/>
		
		<script src="../../../common/js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script ssrc="../../../common/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"  type="text/javascript" charset="utf-8"></script>
		<script src="../../../common/js/bootstrap-3.3.7-dist/js/moment-with-locales.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../common/js/bootstrap-3.3.7-dist/js/bootstrap-datatimepicker.4.14.47.js" type="text/javascript" charset="utf-8"></script>
		
		<!--画图插件-->
		<script src="../../js/Chart.addTest.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="javascript:history.go(-1)"><img class="headImg" src="../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">考勤积分</p>
				</div>
				<div id="content" style="padding-bottom: 0PX;">
					<div class="topInte" >
						<p style=""><img  src="./images/jifen.png"/>考勤积分数：<span id="jifenNum"></span></p>
						<p>每一分积累，都见证成长！</p>
					</div>
					<div style="padding-top: 0.5rem;">
						<div style="padding-left: 0.2rem;height: 6vh;font-size: 0.416666rem!important;margin-bottom: 0.3rem;">
							<span style="float: left;height: 6vh;line-height: 6vh;">时间：</span> 
							<div class="form-group" style="float: left;width: 3.5rem;height: 0.416666rem;margin-top: 8px;">  
					            <div class="input-group date" id='date1' style="height: 0.555555rem;">  
					                <input type="text" class="form-control" style="height: 0.555555rem;">  
					                <span class="input-group-addon" style="height: 0.555555rem;padding: 0;">  
					                    <i style="color: #e93340;height: 0.416666rem;" class="glyphicon glyphicon-calendar"></i>  
					                </span>  
					            </div>  
					        </div>
					        <span style="color: #e93340;float: left;height: 6vh;line-height: 6vh;margin: 0 0.3rem;">——</span>
					        <div class="form-group" style="float: left;width: 3.5rem;height: 0.416666rem;margin-top: 8px;">  
					            <div class="input-group date" id='date2' style="height: 0.555555rem;">  
					                <input type="text" class="form-control" style="height: 0.555555rem;">  
					                <span class="input-group-addon" style="height: 0.555555rem;padding: 0;">  
					                    <i style="color: #e93340;height: 0.416666rem;" class="glyphicon glyphicon-calendar"></i>  
					                </span>  
					            </div>  
					        </div>
							
						</div>
						<p class="titleInte">奖分统计图</p>
						<div class="jifenBox" style="padding-left: 0.5rem;">
							<div class="zjifenContent" id="zjifenContent">
							</div>
							
						</div>
						<div style="text-align: center;">
							<canvas id="canvas1" height="175" width="175" ></canvas>
						</div>
						<p class="titleInte">扣分统计图</p>
						<div class="jifenBox" style="width: 4.5rem;float: left;padding-left: 0.5rem;">
							<p  >统计维度</p>
							<div class="fjifenContent" id="fjifenContent">
							</div>
							
						</div>
						<div style="clear: both;"></div>
						<div style="text-align: center;">
							<canvas id="canvas2" height="175" width="175" ></canvas>
						</div>
						<div>
							 <a href="kaoqinbiao.html">
							 	<p style="font-size: 0.38rem;margin: 0 auto;color: white;border-radius: 20px;padding: 0.18rem; width:5rem;background:#e93340;;text-align: center;font-weight: 400;">统计表</p>
							 </a>
						</div>
						
					</div>
					
					
					
				</div>
			</div>
			<div id="foot" class="row">
				<a class="foot col-xs-3 col-sm-3" href="../kaoqin/index2.html">
					<img class="footImg" src="../../images/guanlixuanzhong.png" />
					<p>管理</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../coalition/colalition.html">
					<img class="footImg" src="../../images/lianmengchushi.png" />
					<p>联盟</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../store/store.html">
					<img class="footImg" src="../../images/11.png" />
					<p>商城</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../personage/personIndex.html">
					<img class="footImg" src="../../images/13.png" />
					<p>我的</p>
				</a>
			</div>
		</div>

	</body>
	
	<script src="../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/rhAdmin.js" type="text/javascript" charset="utf-8"></script>
	
	
	<script type="text/javascript">
		var mycars = new Array("#FF6347","#FF34B3","#FFC125","#912CEE","#969696","#458B00","#00FFFF","#0A0A0A","#8B7500","#CAFF70","#E9967A","#EE3A8C","#EEE9BF","#B0E2FF","#8E8E38","#8B1C62","#7A67EE","#458B00","#00EE00","#7A7A7A","#FFC0CB","#FCFCFC","#F0E68C","#EE00EE","#C1FFC1","#B03060","#8B0000","#7AC5CD","#5F9EA0","#00CDCD");
		$(function() {
			
			$('#date1').datetimepicker({  
		    });
		    
		    $('#date2').datetimepicker({  
		    });
			
			
			//查询基础积分列表，默认会员id1，企业id1，状态为jc，目前时间为当前月份，其实时间应该和上级一样
			$.ajax({
				type: "get",
				url: "http://10.0.47.157:5555/attencepoint-service/tfPointDetailLists?memberId=1&biId=1&status=kq&startDate=2017-11-01&endDate=2017-11-28",
				async: true,
				success: function(data) {
					console.log(data);
					if(data != null){
						var num = data.length;
						var fSum = 0;
						var zSum = 0;
						//得到积分的总数
						for(var i=0;i<num;i++){
							if(Number(data[i].pdNum) > 0){
								zSum += data[i].pdNum*1;
								
							}else{
								fSum += data[i].pdNum*1;
							}
						}
						//alert("zSum="+zSum);
						//alert("fSum="+fSum);
						var jifenNum=0;
						var zstr = [];
						var fstr = [];
						var zhtml = "";
						var fhtml = "";
						for(var j=0;j<num;j++){
							if(Number(data[j].pdNum) > 0){
								var pieDataFn = {
									value:data[j].pdNum,
									color:mycars[j],
									text:Math.round(data[j].pdNum/zSum*100)+"%"
								}
								zstr.push(pieDataFn);
								zhtml += '<p><div style="background-color: '+mycars[j]+';"></div><span  >'+data[j].pdRemark+'：<label>'+data[j].pdNum+'</label> </span></p>';
							}else{
								var pieDataFn = {
									value:data[j].pdNum,
									color:mycars[j],
									text:Math.round(data[j].pdNum*1/fSum*100)+"%"
								}
								fstr.push(pieDataFn);
								fhtml += '<p><div style="background-color: '+mycars[j]+';"></div><span  >'+data[j].pdRemark+'：<label>'+data[j].pdNum+'</label> </span></p>';
							}
							jifenNum += data[j].pdNum;
							//html += '<p><div style="background-color: '+mycars[j]+';"></div><span  >'+data[j].status+'：<label>'+data[j].num+'</label> </span></p>'
						}
						
						$("#jifenNum").html(jifenNum);
						$("#zjifenContent").html(zhtml);
						$("#fjifenContent").html(fhtml);
						var canvas1 = document.getElementById("canvas1");
						var myPie1 = new Chart(canvas1.getContext("2d")).Pie(zstr);
						var canvas2 = document.getElementById("canvas2");
						var myPie2 = new Chart(canvas2.getContext("2d")).Pie(fstr);
					}
				}
			});
		})
	</script>

</html>